
<template>
  <div style="height: 50px; line-height:50px; border-bottom:1px solid #ccc; display: flex">
    <div style="flex:1;">

      <el-breadcrumb separator="/" style=" display: inline-block; margin: 20px">
        <el-breadcrumb-item :to="'/home'">主页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

          <div style="width: 100px">
            <el-dropdown style="width: 150px; cursor: pointer; text-align:right">
              <div style="display: inline-block">
                <img
                    :src="user.avatar"
                    alt=""
                    style="width: 30px;height: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px"
                >
                <span>{{ user.nickname }}</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <router-link to="/person">个人信息</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="logout">
                      退出系统
                    </span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </template>


      <script>
      import {resetRouter} from "@/router";
      import {ArrowDown} from "@element-plus/icons";

      export default {
        name: "vheader",
        components: {ArrowDown},
        props: {
        },
        computed: {
          currentPathName () {
            return this.$store.state.currentPathName;　　//需要监听的数据
          }
        },
        data() {
          return {
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
          }
        },
        watch: {
          currentPathName (newVal, oldVal) {
            console.log(newVal)
          }
        },
        methods: {
          logout(){
            this.$router.push("/login")
            localStorage.removeItem("user")
            this.$message.success("已退出")

            resetRouter()
          }
        }
      }
  </script>
      <style lang="less" scoped>

  </style>
